<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>皮卡丘</title>

    <link rel="stylesheet" href="./bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
    <script src="./bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        *::before,
        *::after {
            box-sizing: border-box
        }

        body {
            background: #ffe600;
            min-height: 100vh;
        }

        .nose {
            border: 10px solid black;
            border-color: black transparent transparent transparent;
            width: 0;
            height: 0;
            position: relative;
            left: 50%;
            top: 145px;
            margin-left: -10px;
        }

        @keyframes wave {
            0% {
                transform: rotate(0deg);
            }

            33% {
                transform: rotate(10deg);
            }

            66% {
                transform: rotate(-10deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        .nose:hover {
            /*transform-origin:center bottom;*/
            animation: wave 500ms infinite linear;
        }

        .yuan {
            position: absolute;
            width: 20px;
            height: 10px;
            top: -20px;
            left: -10px;
            border-radius: 10px 10px 0 0;
            background: black;
        }

        .eye {
            border: 2px solid #000;
            width: 64px;
            height: 64px;
            position: absolute;
            left: 50%;
            margin-left: -32px;
            top: 100px;
            background: #2e2e2e;
            border-radius: 50%;
        }

        .eye::before {
            content: '';
            display: block;
            border: 3px solid #000;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            background: #fff;
            position: relative;
            left: 4px;
            top: 2px;
        }

        .eye.left {
            transform: translateX(-100px);
        }

        .eye.right {
            transform: translateX(100px);
        }

        .mouth {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 170px;
            margin-left: -100px;
        }

        .up {
            position: relative;
        }

        .lip {
            height: 30px;
            width: 100px;
            border: 3px solid black;
            border-top: none;
            left: 50%;
            z-index: 10;
            background: #ffe600;
        }

        .lip.left {
            border-radius: 0 0 0 50px;
            border-right: none;
            transform: rotate(-20deg);
            position: absolute;
            margin-left: -50%;
        }

        .lip.right {
            border-radius: 0 0 50px 0;
            border-left: none;
            transform: rotate(20deg);
            position: absolute;
        }

        .down {
            height: 180px;
            position: absolute;
            width: 100%;
            overflow: hidden;
        }

        .yuan1 {
            width: 150px;
            height: 1000px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -75px;
            border-radius: 75px/300px;
            background: #9b000a;
            overflow: hidden;
            border: 3px solid black;
        }

        .hide {
            width: 220px;
            height: 10px;
            position: absolute;
            left: 50%;
            margin-left: -110px;
            transform: translateY(148px);
            background: #ffe600;
        }

        .yuan2 {
            width: 180px;
            height: 300px;
            position: absolute;
            bottom: -160px;
            left: 50%;
            margin-left: -90px;
            background: #ff485f;
            border-radius: 100px;
        }

        .face.left {
            position: absolute;
            border: 2px solid black;
            width: 100px;
            height: 100px;
            left: 50%;
            margin-left: -50px;
            transform: translateX(-170px);
            top: 200px;
            border-radius: 50%;
            background: #ff0000;
        }

        .face.right {
            position: absolute;
            border: 2px solid black;
            width: 100px;
            height: 100px;
            left: 50%;
            margin-left: -50px;
            transform: translateX(175px);
            top: 200px;
            border-radius: 50%;
            background: #ff0000;
        }

        .box {
            width: 500px;
            margin: 0 auto;
            margin-top: 400px;
            text-align: center;
        }

        .box h1 {
            color: #2E2E2E;
        }

        a {
            color: #212529;
        }
    </style>
</head>

<body>
    <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
            <div class="yuan">
            </div>
        </div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="mouth">
            <div class="up">
                <div class="lip left"></div>
                <div class="lip right"></div>
            </div>
            <div class="down">
                <div class="yuan1">
                    <div class="yuan2">

                    </div>
                </div>
            </div>
        </div>
        <div class="hide"></div>
    </div>

    <div class="box">
        <h1 class=".text-monospace">My Homework List</h1>
        <table class="table table-striped table-warning text-center">
            <thead>
                <tr>
                    <th scope="col">Num</th>
                    <th scope="col">Name</th>
                    <th scope="col">Date</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td><a class=".text-decoration-none" href="./homework/history.html">历史查询</a></td>
                    <td>2021.10.11</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a class=".text-decoration-none" href="./homework/GoodsQuery.html">商品查询</a></td>
                    <td>2021.10.09</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a class=".text-decoration-none" href="./homework/Ctrip.html">携程</a></td>
                    <td>2021.10.01</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><a class=".text-decoration-none" href="./homework/petal.html">花瓣</a></td>
                    <td>2021.9.29</td>
                </tr> -->
            </tbody>
        </table>

        <script>
            let data = [
                {
                    name: "在线考试",
                    src: "exam.html",
                    date: "2021.10.16"
                },
                {
                    name: "红绿灯",
                    src: "ansync-await.html",
                    date: "2021.10.13"
                },
                {
                    name: "历史查询",
                    src: "history.html",
                    date: "2021.10.11"
                },
                {
                    name: "商品查询",
                    src: "GoodsQuery.html",
                    date: "2021.10.09"
                },
                {
                    name: "携程",
                    src: "Ctrip.html",
                    date: "2021.10.01"
                },
                {
                    name: "花瓣",
                    src: "petal.html",
                    date: "2021.9.29"
                }
            ];

            data.forEach((item, index) => {
                $("tbody").append($(`<tr>
                    <td>${index+1}</td>
                    <td><a class=".text-decoration-none" href="./homework/${item.src}">${item.name}</a></td>
                    <td>${item.date}</td>
                </tr>`));
            })
        </script>
    </div>

</body>

</html>